<template>
  <div>
    <el-divider />
    <el-form
      v-loading="spinning"
      :model="data.dataInstance"
      ref="formRef"
      label-width="150px"
      :validate-on-rule-change="false"
    >
      <div v-for="col in data.dataSchema.colModel" :key="col.colSqlName">
        <div v-if="col.colSqlName == 'id'">
          <el-form-item :label="col.colName" :name="col.colSqlName">
            <el-input v-model="data.dataInstance[col.colSqlName]" disabled />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'date'">
          <el-form-item
            :label="col.colName"
            :name="col.colSqlName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
          >
            <el-date-picker
              v-model="data.dataInstance[col.colSqlName]"
              format="YYYY-MM-DD HH:mm:ss"
              type="datetime"
              placeholder="Pick a date"
              style="width: 100%"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'bol'">
          <el-form-item
            :label="col.colName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
          >
            <el-switch
              v-model="data.dataInstance[col.colSqlName]"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') || (opType == 2 && col.colCanUpdate == '0')
              "
            />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'text'">
          <el-form-item
            :label="col.colName"
            :name="col.colSqlName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
          >
            <el-input
              :name="col.colSqlName"
              v-model="data.dataInstance[col.colSqlName]"
              type="textarea"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'enum'">
          <el-form-item
            :label="col.colName"
            :name="col.colSqlName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
          >
            <el-input
              :name="col.colSqlName"
              v-model="data.dataInstance[col.colSqlName]"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'map'">
          <el-form-item
            :autoLink="false"
            :label="col.colName"
            :name="col.colSqlName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
          >
            <el-input
              :name="col.colSqlName"
              v-model="data.dataInstance[col.colSqlName]"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'upload'">
          <el-form-item :label="col.colName">
            <el-input
              :name="col.colSqlName"
              v-model="data.dataInstance[col.colSqlName]"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
        <div v-else-if="col.colDataType == 'webComponentName'">
          <el-form-item
            :autoLink="false"
            :label="col.colName"
            :name="col.colSqlName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
          >
            <el-input
              :name="col.colSqlName"
              v-model="data.dataInstance[col.colSqlName]"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item
            :label="col.colName"
            :name="col.colSqlName"
            :prop="col.colSqlName"
            :required="
              (opType == 1 && col.colCanInsert == '2') || (opType == 2 && col.colCanUpdate == '2')
            "
            :rules="{
              type: 'string',
              trigger: 'blur',
              validator: (_rule, value, callback) =>
                myValidate(
                  col.pattern || '[\s\S]*',
                  value,
                  callback,
                  col.patternMsg || '请输入符合表达式:' + col.pattern + ' 的内容'
                )
            }"
          >
            <el-input
              :name="col.colSqlName"
              v-model="data.dataInstance[col.colSqlName]"
              :disabled="
                (opType == 1 && col.colCanInsert == '0') ||
                (opType == 2 && col.colCanUpdate == '0') ||
                opType == 3
              "
            />
          </el-form-item>
        </div>
      </div>
      <el-form-item :wrapper-col="{ span: 14, offset: 8 }" v-if="showOpt">
        <el-button type="primary" @click="formInfo.submit">提交</el-button>
        <el-button style="margin-left: 10px" @click="formInfo.cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { deepClone } from '@/utils'
import request from '@/config/axios'
import { ElDivider, ElForm, ElFormItem, ElDatePicker, ElSwitch, ElInput } from 'element-plus'
const props = defineProps({
  dataName: {
    type: String,
    required: false,
    default() {
      return ''
    }
  },
  dataSchema: {
    type: Object,
    required: false,
    default() {
      return { colModel: [{ colDataType: '', colSqlName: '' }], modelInstance: {} }
    }
  },
  dataInstance: {
    type: Object,
    required: false,
    default() {
      return {}
    }
  },
  opType: {
    type: Number,
    required: false,
    default() {
      return 1
    }
  },
  showOpt: {
    type: Boolean,
    required: false,
    default() {
      return true
    }
  }
})
const emit = defineEmits(['sumbit', 'cancel'])
const spinning = ref(false)
const formRef = ref()
const data: any = reactive({
  dataSchema: { colModel: [{ colDataType: '', colSqlName: '' }], modelInstance: {} },
  dataInstance: {}
})
const opType = ref(props.opType)
const showOpt = ref(props.showOpt)
const formInfo = reactive({
  layout: 'horizontal',
  formItemLayout: {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 }
  },
  handleUploadOver: (fileList, colSqlName) => {
    console.log(fileList)
    data.dataInstance[colSqlName] = JSON.stringify(fileList)
  },
  submit: () => {
    formRef.value
      .validate()
      .then(() => {
        emit('sumbit', data.dataInstance, spinning)
      })
      .catch((error) => {
        console.log('error', error)
      })
  },
  cancel: () => {
    emit('cancel')
  }
})
function initDataSchema() {
  if (!props.dataName) {
    data.dataSchema = props.dataSchema
    initDataInstance()
  } else {
    request
      .get({
        url: '/infra/base/dynamicTable/getTable/' + props.dataName
      })
      .then((value) => {
        data.dataSchema = value
        initDataInstance()
      })
  }
}
function initDataInstance() {
  if (props.dataInstance.id) {
    data.dataInstance = deepClone(props.dataInstance)
  } else {
    data.dataInstance = deepClone(data.dataSchema.modelInstance)
  }
}

function myValidate(rule, value, callback, msg) {
  let reg = new RegExp(rule)
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error(msg))
  }
}
watch(
  () => props.dataInstance,
  () => {
    initDataInstance()
  }
)
watch(
  () => props.dataSchema,
  () => {
    initDataSchema()
  }
)
watch(
  () => props.dataName,
  () => {
    initDataSchema()
  }
)
watch(
  () => props.showOpt,
  () => {
    showOpt.value = props.showOpt
  }
)
onMounted(() => {
  initDataSchema()
})
</script>
